<template>
  <div style="width: 100%;height: 100%;overflow: auto">
    <div style="box-shadow:#6cc142  9px 1px 9px 0px;position: relative;z-index: 1; ">
      <div style="float: left;height: 60px;padding: auto 0;color: white;margin-left: 20px;">
        <div style="line-height: 60px;">
          <i class="el-icon-s-custom fontColor"></i>
          <span slot="title" class="fontColor" style="cursor: pointer;" v-show="name_open == 0" @click="openName">{{projectName}}</span>
          <el-input type="text" v-model.trim="projectName" style="width:80%;margin-bottom: 2px;" size="small" v-show="name_open == 1"  @blur="updateProjectName" ref="name">
          </el-input>
          <el-tooltip class="item" effect="dark" content="选为星标" placement="bottom" v-if="topStatus == 0">
            <i class="el-icon-star-on" style="margin-left: 10px;cursor: pointer" v-if="topStatus == 0" @click="updateToTop"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="取消星标" placement="bottom"  v-if="topStatus == 1">
            <i class="el-icon-star-on" style="color: #ffd04b;margin-left: 10px;cursor: pointer" v-if="topStatus == 1" @click="updateNoTop"></i>
          </el-tooltip>
        </div>
      </div>
      <div style="margin:0 auto;width: 494px;">
        <el-menu
          :default-active="$route.path"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#2a2d2f"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="border-bottom: none;display: inline-block"
          router>
          <el-menu-item :index= overview>项目概览</el-menu-item>
          <el-menu-item :index= target>目标管理</el-menu-item>
          <el-menu-item :index= task>任务管理</el-menu-item>
          <el-menu-item :index= pay>费用管理</el-menu-item>
        </el-menu>
      </div>
    </div>
    <router-view @getMessage="getMessage"></router-view>
  </div>
</template>

<script>
  const axios = require('axios');
  export default {
    name: "projectDetail",
    data() {
      return {
        projectName: "",
        topStatus: 0,
        name_open: 0,
        creatorId: 0,
        principalId: 0,
        overview: "/user/projects/projectDetail/overview/" + this.$route.params.id ,
        target: "/user/projects/projectDetail/target/" + this.$route.params.id,
        task: '/user/projects/projectDetail/task/' + this.$route.params.id,
        pay: '/user/projects/projectDetail/pay/' + this.$route.params.id,
      }
    },
    created:function() {
      this.$emit("updatePath",this.overview)
    },
    methods: {
      openName(){
        if(this.creatorId == window.localStorage.getItem("id") || this.principalId == window.localStorage.getItem("id")){
          this.name_open = 1;
          this.$nextTick(() => {
            this.$refs.name.focus()
          })
        }
      },
      updateProjectName(){
        if(this.projectName == ""){
          this.$message.error('项目名称不能为空');
        }else{
          axios.post("/updateProjectName",{"project_name":this.projectName,"id":this.$route.params.id}).then(res => {
            if(res.data == 1){
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success'
              });
              this.getMessage();
            }else{
              this.$notify.error({
                title: '错误',
                message: '修改失败'
              });
            }
          })
          this.name_open = 0;
        }
      },
      updateToTop(){
        if(this.creatorId == window.localStorage.getItem("id") || this.principalId == window.localStorage.getItem("id")){
          axios.post("/ToTop",{"id":this.$route.params.id}).then(res => {
            if(res.data == 1){
              this.$notify({
                title: '成功',
                message: '设为星标成功',
                type: 'success'
              });
              this.topStatus = 1;
              this.getMessage();
            }else{
              this.$notify.error({
                title: '错误',
                message: '设为星标修改失败'
              });
            }
          })
        }
      },
      updateNoTop(){
        if(this.creatorId == window.localStorage.getItem("id") || this.principalId == window.localStorage.getItem("id")){
          axios.post("/cancelTop",{"id":this.$route.params.id}).then(res => {
            if(res.data == 1){
              this.$notify({
                title: '成功',
                message: '取消星标成功',
                type: 'success'
              });
              this.topStatus = 0;
              this.getMessage();
            }else{
              this.$notify.error({
                title: '错误',
                message: '取消星标修改失败'
              });
            }
          })
        }
      },
      getMessage(){
        this.$emit("getMessage");
      }
    },
  }
</script>

<style scoped>

</style>
